<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('news') }}</view>
    </view>
    <view class="image">
        <view class="lastest">{{ $t('news.lastest') }}</view>
        <image :src="item.img" mode="" />
    </view>
    <view class="main">
        <view class="left">
            <view class="title">{{ item.title }}</view>
            <view class="date">{{ item.date }}</view>
        </view>
        <!-- <image src="../../static/icon/leida.png" class="right" mode="" /> -->
    </view>
    <view class="content" id="content" v-html="item.uniHtml">
    </view>
    <!-- {{  }} -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getKey } from '@/utils/storage';
import { convertHtmlToUniApp, formateDate } from '@/utils/formatter'

// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
const item = ref()
onLoad(() => {
    item.value = getKey('newsItem')
    const { date } = item.value
    item.value.date = formateDate(new Date(date), 'yyyy-MM-dd hh:mm')
})
onMounted(() => {
    const uniHtml = convertHtmlToUniApp(item.value.content)
    item.value.uniHtml = uniHtml
})

</script>

<style lang="scss">
page {
    background-color: #191A22;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.image {
    width: 670rpx;
    height: 378rpx;
    margin: 0 auto;
    position: relative;

    image {
        border-radius: 40rpx;
        width: inherit;
        height: inherit;
        object-fit: cover;
    }

    .lastest {
        position: absolute;
        top: 24rpx;
        left: 24rpx;
        z-index: 99;
        border-radius: 125rpx;
        text-align: center;
        line-height: 55rpx;
        width: 146rpx;
        height: 55rpx;
        background-color: rgba(255, 255, 255, .3);
        color: #fff;
        // mix-blend-mode: difference;
    }

}

.main {
    width: 670rpx;
    margin: 28rpx auto 54rpx;
    display: flex;

    .left {
        .title {
            color: #fff;
            font-size: 32rpx;
            margin-bottom: 8rpx;
        }

        .date {
            color: #B9C0D4;
            font-size: 20rpx;
        }
    }

    .right {
        width: 64rpx;
        height: 64rpx;
    }
}

.content {
    width: 670rpx;
    margin: 0 auto;
    color: #B9C0D4;
}
</style>